<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>文档列表 - 菜单管理</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="lyear-layout-web" id="vue">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">
       
      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <a href="/"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
      </div>
      <div class="lyear-layout-sidebar-scroll">
        
        <nav class="sidebar-main">
            <!--左侧菜单内容-->
          <ul class="nav nav-drawer">
              <li class="nav-item" v-for="(item,index) in menus"> <a :href="item.href"><i :class="item.icon"></i> {{item.name}}</a> </li>
          </ul>
        </nav>
		
        <div class="sidebar-footer">
          <p class="copyright">Copyright &copy; 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
        </div>
      </div>
      
    </aside>
    <!--End 左侧导航-->
    
    <!--头部信息-->
    <header class="lyear-layout-header">
      
      <nav class="navbar navbar-default">
        <div class="topbar">
          
          <div class="topbar-left">
            <div class="lyear-aside-toggler">
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
            </div>
            <span class="navbar-page-title"> 网址管理 </span>
          </div>
          
          <ul class="topbar-right">
            <li class="dropdown dropdown-profile">
              <a href="javascript:void(0)" data-toggle="dropdown">
                <img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="笔下光年" />
                <span>笔下光年 <span class="caret"></span></span>
              </a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                <li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                <li class="divider"></li>
                <li> <a href="backend_selfLogin.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
              </ul>
            </li>
          </ul>
          
        </div>
      </nav>
      
    </header>
    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-toolbar clearfix">
                
                <div class="toolbar-btn-action">
                  <button class="btn btn-primary m-r-5" @click="clickAdd()">
                  <i class="mdi mdi-plus">新增</i>
                  </button>
                </div>
                  <div class="col-lg-6" >
                      <div class="input-group">
                          <input type="text" v-model="website.description" class="form-control" placeholder="输入内容" @keydown.enter="listWebsite()">
                          <span class="input-group-btn">
                            <button class="btn btn-default" type="button" @click="clickClean()">清空</button>
                            <button class="btn btn-default" type="button" @click="listWebsite()">搜索</button>
                          </span>
                      </div>
                  </div>
				
              </div>
              <div class="card-body">
                
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th class="col-xs-1">菜单名称</th>
						<th class="col-xs-1">菜单链接</th>
						<!-- <th class="col-xs-1">是否公开</th> -->
                        <th class="col-xs-1">菜单图标</th>
                        <th class="col-xs-1">菜单顺序</th>
                        <th class="col-xs-1">是否删除</th>
                          <th class="col-xs-4">菜单描述</th>
                        <th class="col-xs-2">创建时间</th>
                        <th class="col-xs-2">操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item,index) in list">
                        <td>{{item.name}}</td>
                        <td>{{item.href}}</td>
						<!-- <td>{{item.ishow}}</td> -->
						<td>{{item.icon}}</td>
                        <td>{{item.sequ}}</td>
                          <td>{{item.isdel}}</td>
                        <td>{{item.description}}</td>
                          <td>{{item.createtime}}</td>
                        <td>
                          <div class="btn-group">
                            <a class="btn btn-xs btn-default" @click="clickEdit(item)" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                            <a class="btn btn-xs btn-default" @click="clickDel(item)" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                           </div>
                        </td>
                      </tr>
                      
                    </tbody>
                  </table>
                </div>
                
       
              </div>
			  
			  
			  
	<!--		  <el-pagination
				@size-change="changeSize"
				@current-change="changePage"
				:current-page="param.page"
				:page-sizes="[10, 20, 50, 100]"
				:page-size="param.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="param.total">
			  </el-pagination>-->
			  
            </div>
          </div>
          
        </div>
        
      </div>
      
    </main>
    <!--End 页面主要内容-->
	
	<!-- 模态窗口 -->
	<button id="showModal" v-show="false" class="btn btn-primary m-r-5" type="button"  data-toggle="modal" data-target="#exampleModal" >打开</button>
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="exampleModalLabel">{{operateType}}</h4>
	      </div>
		  
	      <div class="modal-body">
			  
	          <div class="form-group">
	            <label for="recipient-name" class="control-label">菜单名称：</label>
	            <input type="text" class="form-control"  v-model="website.name">
	          </div>

              <div class="form-group">
                  <label for="recipient-name" class="control-label">菜单排序：</label>
                  <input type="text" class="form-control"  v-model="website.sequ">
              </div>

              <div class="form-group">
                  <label for="recipient-name" class="control-label">菜单链接：</label>
                  <input type="text" class="form-control"  v-model="website.href">
              </div>

              <div class="form-group">
                  <label for="recipient-name" class="control-label">菜单图标：</label>
                  <input type="text" class="form-control"  v-model="website.icon">
              </div>

              <div class="form-group">
                  <label for="recipient-name" class="control-label">菜单描述：</label>
                  <input type="text" class="form-control"  v-model="website.description">
              </div>

	      </div>
		  
	      <div class="modal-footer">
	        <button id="hiddenModal" v-show="false" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			<button type="button" class="btn btn-default" @click="clickClose()">关闭</button>
	        <button type="button" class="btn btn-primary" @click="clickEnter()">确定</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="bootstrap/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>

<!--消息提示-->
<script src="js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="js/lightyear.js"></script>

<script type="text/javascript" src="vue/vue.min.js"></script>
<script type="text/javascript" src="vue/vue_config.js"></script>
<script type="text/javascript" src="vue/axios.min.js"></script>
<script type="text/javascript" src="vue/vue_api.js"></script>
<script type="text/javascript" src="vue/commons.js"></script>

<link href="vue/element/index.css" rel="stylesheet">
<script type="text/javascript" src="vue/element/index.js"></script> 

<script type="text/javascript">
	new Vue({
		el: '#vue',
		data: {
		    menus: [],
			modal:{},
			showModal:{},
			hiddenModal:{},

			operateType: "新增",

			param: {
				page: 1,
				size: 10
			},//查询使用
			website: {},//添加修改使用的内容
			
			list: [],
		},
		created(){
		    this.getMenusList();
			this.listWebsite();
		},
		mounted(){
			this.showModal = document.getElementById("showModal")
			this.hiddenModal = document.getElementById("hiddenModal")

            const exampleModal = document.getElementById("exampleModal");
            $(exampleModal).on('hide.bs.modal', this.onModalHide);
            //this.showModal.addEventListener('hide.bs.modal', this.onModalHide);
            //$(this.showModal).on('hide.bs.modal', this.onModalHide);
		},
		
		methods: {

           getMenusList(){
              var url = rootUrl+"sys/menus";
              fetchDataGet(url).then(res =>{
                 this.menus=res.list;
              })
            },

            clickClean(){
                this.website={};
                this.listWebsite();
            },

		    onModalHide(){
		        console.log("模态框隐藏")
                this.website = {};
            },

			changeSize(val){
				this.param.size = val;
				this.toPage();
			},
			changePage(val){
				this.param.page = val;
				this.toPage();
			},
			toPage(index){
				console.log(index)
				
				this.listWebsite();
			},
			clickAdd(){
				this.operateType="新增";
				this.showModal.click();
			},
			clickEdit(row){
				this.operateType="编辑";

				//this.website = row
				this.selectInfoWebsiteOne(row.id)
				console.log("点击编辑",this.website)
				this.showModal.click();
			},
			clickCheck(){
				this.operateType="查看";
				this.showModal.click();
			},
			changeCategory(e){
				console.log("大类发生改变",e.target.value)
				this.selectInfoWebsiteType(e.target.value);
			},
			clickEnter(){
				if(this.operateType === "新增"){
					this.addWebsite();
				}
				if(this.operateType === "编辑"){
					this.updateWebsite();
				}
			},
			clickClose(){
				this.website = {};
				this.hiddenModal.click();
			},
			
			clickDel(row){
				this.delWebsite(row)
			},
			

			selectInfoWebsiteOne(id){
				//使用模板字符串
				var url =`${rootUrl}sys/menu/${id}`
				fetchDataGet(url).then(res =>{
					this.website = res.data;
				})
			},
			
			
			selectInfoWebsiteCategory(){
				var url = rootUrl+"websiteType/categorys/selectInfo";
				fetchDataGet(url).then(res =>{
					this.websiteCategory = res.list;
				})
			},
			
			selectInfoWebsiteType(value){
				var url = rootUrl+"websiteType/selectInfo";
				fetchDataPost(url,{"value":value}).then(res =>{
					this.websiteType = res.list;
				})
			},
			
			listWebsite(){
				var url = rootUrl+"sys/menu/list";
				fetchDataPostList(url,this.website,this.param).then(res =>{
					if(res.code === 200){
						this.list = res.list;
						this.param = res.metaInfo
						success(res.message);
					}else{
						danger(res.message);
					}
				})
			},
			addWebsite(){
				var url = rootUrl+"sys/menu/add";
				fetchDataPost(url,this.website).then(res =>{
					console.log(res)
					if(res.code === 200){
						success(res.message);
						this.hiddenModal.click();
						this.website = {};
						this.listWebsite();
					}else{
						danger(res.message);
					}
				})
			},
			updateWebsite(){
				var url = rootUrl+"sys/menu/update";
				fetchDataPost(url,this.website).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.hiddenModal.click();
						this.website = {};
						this.listWebsite();
					}else{
						danger(res.message);
					}
				})
			},
			delWebsite(website){
				var url = rootUrl+"sys/menu/del";
				fetchDataPost(url,website).then(res =>{
					if(res.code === 200){
						success(res.message);
						this.listWebsite();
					}else{
						danger(res.message);
					}
				})
			},


			
		},
	})
</script>
</body>
</html>